import clsx from 'clsx'
import type { HTMLAttributes, ReactNode } from 'react'

type BadgeTone = 'neutral' | 'brand' | 'success' | 'warning'

const toneStyles: Record<BadgeTone, string> = {
  neutral: 'border-slate-200 bg-white text-slate-500',
  brand: 'border-transparent bg-blush-50 text-blush-500',
  success: 'border-transparent bg-emerald-50 text-emerald-600',
  warning: 'border-transparent bg-amber-50 text-amber-600',
}

type BadgeProps = {
  tone?: BadgeTone
  leadingIcon?: ReactNode
} & HTMLAttributes<HTMLSpanElement>

export const Badge = ({ tone = 'neutral', leadingIcon, className, children, ...props }: BadgeProps) => {
  return (
    <span
      className={clsx(
        'inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-semibold',
        toneStyles[tone],
        className,
      )}
      {...props}
    >
      {leadingIcon ? <span className="flex h-3.5 w-3.5 items-center justify-center">{leadingIcon}</span> : null}
      {children}
    </span>
  )
}

export default Badge
